<template>
  <div class="app">

    <div class="redact">
                <div  @click="fh">取消</div>
            <div>编辑小红书号</div>
            <div id="save" @click="bao">保存</div>
        </div>
        <div class="alter">小红书号是账号的唯一凭证，只能修改一次</div>
        <div class="box">
            <input type="text" id="inp"  v-model="redbooknum">
        </div>
        <div class="sum">6-15个字符,仅可使用英文(必须),数字,下划线</div>

  </div>
</template>

<script>
import { change_name } from "@/api/personal";
export default {
    data() {
        return {
            d:'',
            redbooknum:"",
        }
    },
    methods: {
        fh() {
      this.$router.go(-1);
        },
        bao() {
            
      let data = JSON.parse(localStorage.getItem("userid"));
      this.d =  data + "";
      change_name({
          redbooknum: this.redbooknum,
          uid:this.d
      })
        .then((res) => {
          console.log(this.redbooknum);
          console.log(res);
        })
        .catch((rest) => {
          console.log(123);
        });
    },
    }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.app {
  width: 100vw;
  height: 100vh;
  background: #f6f6f6;
}
.redact{
    padding-top: 20px;
    display: flex;
    justify-content: space-around;
}
.redact div:nth-child(1){
    color: gray;
}
.redact div:nth-child(3){
    color: red;
}
.alter{
    margin:15px 20px ;
}
.box{
    width: 350px;
    height: 50px;
    border: 1px solid white;
    border-radius: 15px;
    background-color: #ffff;
    margin: 0 auto;
}
#inp{
    width: 350px;
    height: 50px;
    border: 0;
    outline: none;
    background-color: #ffff;
    border-radius: 15px;
}
.sum{
    margin-top: 10px;
    font-size: 13px;
    margin-left: 20px;
    color: gray;

}

</style>